/*
	TODO: Refactor common styles to gadgets.css when it has been updated for the Hubbub 0.5 designs.
*/

body {
	background-color: #002200;
}

h2 {
	font-size: 1.1em;
	margin: 10px;
}

h2 img.service-icon {
	width: 20px;
	margin-right: 8px;
}

p {
	margin-bottom: 8px;
}

.button73 {
	height: 32px;
	width: 73px;
	background: transparent url('gadgets/common/images/button073.png') 0 0 no-repeat;
	font-size: 10px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	padding: 10px 0px;
}

.config, .friends {
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 1;
	height: 149px;
	background-color: black;
	padding: 16px;
}

.config .roundedcorner_box {
	display: inline-block;
	margin-right: 16px;
	background: #282828;
}

.config .roundedcorner_top div {
	background: url(gadgets/common/images/roundedcorner_tl.png) no-repeat top left;
}

.config .roundedcorner_top {
	background: url(gadgets/common/images/roundedcorner_tr.png) no-repeat top right;
}

.config .roundedcorner_bottom div {
	background: url(gadgets/common/images/roundedcorner_bl.png) no-repeat bottom left;
}

.config .roundedcorner_bottom {
	background: url(gadgets/common/images/roundedcorner_br.png) no-repeat bottom right;
}

.config .roundedcorner_top div, .roundedcorner_top, .roundedcorner_bottom div, .roundedcorner_bottom {
	width: 276px;
	height: 8px;
	font-size: 1px;
}

.config .roundedcorner_content {
	margin: 0 8px;
	height: 133px;
	overflow: hidden;
}

.config xf\:input, xf\:secret {
	display: block;
}

.config xf\:input .value, xf\:secret .value {
	width: 150px;
}

.config xf\:input xf\:label, xf\:secret xf\:label {
	width: 110px;
}

.config xf\:secret {
	margin: 10px 0px;
}

.config .message {
	width: 179px;
	height: auto;
}

.config .error {
	color: red;
}

.config xf\:output.disabled, .config xf\:group.disabled {
	display: none;
}

.config #friendfeed-signin {
	position: absolute;
	bottom: 8px;
	left: 211px;
}

.config #twitter-signin {
	position: absolute;
	bottom: 8px;
	left: 503px;
}

.config a, .link {
	color: #7af;
	cursor: pointer;
	text-decoration: none;
}

.config a:hover, a:active, .link:hover, .link:active {
	text-decoration: underline;
}

.friends .palette {
	position: relative;
	left: 0px;
	top: 0px;
	width: expression('' + (document.body.clientWidth - 32) + 'px');
	height: 125px;
	overflow-y: auto;
	overflow-x: hidden;
}

.friends .palette .item {
	position: relative;
	left: 0px;
	top: 0px;
	width: 58px;
	height: 58px;
	display: inline-block;
	text-align: left;
	vertical-align: top;
}

.friends .palette .item .avatar img {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 50px;
	height: 50px;
}

.friends .palette .item .drag-proxy img {
	z-index: 5;
}

.stem {
	position: relative;
	left: 0px;
	top: 0px;
	z-index: 10;
	width: 100%;
	height: 26px;
	background: transparent url('images/stem_bg.png') 0 0 repeat;
	padding-left: 50px;
}

.stem #logo {
	position: absolute;
	left: 8px;
	top: 5px;
	width: 16px;
}

.stem .close-button {
	width: 16px;
	height: 16px;
	background: transparent url('gadgets/common/images/close-button_bg.png') 0 0 no-repeat;
}

.stem .close-button:hover, .stem .close-button:active {
	background: transparent url('gadgets/common/images/close-button_bg.png') 0 -16px no-repeat;
}

.stem .button16 {
	width: 16px;
	height: 16px;
}

.stem .hub-container {
	position: relative;
	left: 0px;
	top: 0px;
	display: inline-block;
	width: 106px;
	height: 25px;
	margin-right: 14px;
}

.stem .hub-container .hub-base {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 90px;
	height: 25px;
	display: block;
	background: transparent url('images/hub-base_bg.png') 0 0 repeat;
	text-align: center;
}

.stem .hub-container:hover .hub-base, .stem .hub-container:hover .hub-base {
	background: transparent url('images/hub-base_bg.png') 0 -25px repeat;
}

.stem .hub-container .hub-base xf\:output {
	position: relative;
	top: 5px;
}

.stem .hub-container .close-button {
	position: absolute;
	left: 90px;
	top: 0px;
	display: none;
}

.stem .hub-container:hover .close-button, .stem .hub-container:active .close-button {
	display: block;
}

.stem .hub-container xf\:input .value {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 90px;
	height: 25px;
	display: block;
	text-align: center;
	padding: 5px 0px;
}

.stem .newhub-button-container {
	position: relative;
	left: 0px;
	top: 0px;
	display: inline-block;
	width: 16px;
	height: 25px;
}

.stem .newhub-button-container .newhub-button {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 18px;
	height: 18px;
	display: block;
	background: transparent url('images/stem-newhub-button_bg.png') 0 0 no-repeat;
}

.stem .newhub-button:hover, .stem .newhub-button:active {
	background: transparent url('images/stem-newhub-button_bg.png') -18px 0 no-repeat;
}

.stem .button18 {
	width: 18px;
	height: 18px;
}

.stem .actions {
	position: absolute;
	right: 50px;
	top: 0px;
}

.stem .button26 {
	width: 26px;
	height: 26px;
}

.stem .feed-button {
	width: 26px;
	height: 25px;
	background: transparent url('images/stem-feed-button_bg.png') 0 -25px no-repeat;
}

.stem .feed-button:hover, .stem .feed-button:active {
	background: transparent url('images/stem-feed-button_bg.png') 0 0 no-repeat;
}

.stem .post-button {
	width: 26px;
	height: 25px;
	background: transparent url('images/stem-post-button_bg.png') 0 -25px no-repeat;
}

.stem .post-button:hover, .stem .post-button:active {
	background: transparent url('images/stem-post-button_bg.png') 0 0 no-repeat;
}

.stem .friends-button {
	width: 26px;
	height: 25px;
	background: transparent url('images/stem-friends-button_bg.png') 0 -25px no-repeat;
}

.stem .friends-button:hover, .stem .friends-button:active {
	background: transparent url('images/stem-friends-button_bg.png') 0 0 no-repeat;
}

.stem .configure-button {
	width: 26px;
	height: 25px;
	background: transparent url('images/stem-configure-button_bg.png') 0 -25px no-repeat;
}

.stem .configure-button:hover, .stem .configure-button:active {
	background: transparent url('images/stem-configure-button_bg.png') 0 0 no-repeat;
}

.stem #hide-button, .stem #restore-button {
	margin-right: 80px;
}

.stem .hide-button {
	width: 26px;
	height: 25px;
	background: transparent url('images/stem-hide-button_bg.png') 0 -25px no-repeat;
}

.stem .hide-button:hover, .stem .hide-button:active {
	background: transparent url('images/stem-hide-button_bg.png') 0 0 no-repeat;
}

.stem .restore-button {
	width: 26px;
	height: 25px;
	background: transparent url('images/stem-restore-button_bg.png') 0 -25px no-repeat;
}

.stem .restore-button:hover, .stem .restore-button:active {
	background: transparent url('images/stem-restore-button_bg.png') 0 0 no-repeat;
}

.stem #exit-button {
	position: absolute;
	right: 0px;
	top: 0px;
}
